<template>
  <div class="home" >
    <el-backtop  :bottom="100"></el-backtop>
    <div id="el-header">
      <el-row>
        <el-col :span="1">
          <el-image
            style="width: 30px; height: 30px;"
            :src=imgUrl.imgUrlHD
            @click="drawer = true"
            fit=fill>
          </el-image>
        </el-col>
        <el-col :span="23">
          <h3 id="el-header-span">晚鲸的作品集</h3>
        </el-col>
      </el-row>
    </div>

    <el-drawer
      size="100%"
      title="试金石"
      :visible.sync="drawer"
      :with-header="false"
      class="el-drawer">
      <div style="height: 30%;" @click="(drawer = false)"></div>
      <el-input v-model="kId" clearable placeholder="康康！" id="input_1" show-password style="opacity: 0.5;"></el-input>
      <div style="height: 100%;" @click="(drawer = false)"></div>
    </el-drawer>

    <el-main id="el-main">
          <div class="el-tabs_el-tab-pane_dev">
            <!-- style="opacity: 0.8;" -->
            <el-tabs >
              <el-tab-pane label="首页">
                <Cover/>
                <ProjectInformationList/>
              </el-tab-pane>
              <el-tab-pane label="内容管理" v-if="TFBackstageHome">
                <!-- v-if="TFBackstageHome" -->
                <BackstageHome/>
              </el-tab-pane>
            </el-tabs>
          </div>
        <!-- </el-col> -->
      <!-- </el-row> -->
    </el-main>

    <el-footer id="el-footer">
        <h4>Copyright © 2021 LateWhale</h4>
        <h4>滇ICP备2021002597号-1</h4>
    </el-footer>
  </div>
</template>

<script>
// @ is an alias to /src
import kuser from '@/model/kuser'
import ProjectInformationList from './ProjectInformation/ProjectInformation-list.vue'
import BackstageHome from './backstage/backstageHome.vue'
import Homepage from './homepage/homepage.vue'
import BackgroundEffect from './BackgroundEffect/BackgroundEffect.vue'
import Cover from './cover/cover.vue'
import imgUrlHD from '../../public/static/img/HD.png'
import imgUrlQD from '../../public/static/img/QD.png'
import CanvasNest from '../../public/static/js/canvas-nest.js'

export default {
  name: 'Home',
  components: {
    ProjectInformationList,
    BackstageHome,
    // Homepage,
    // BackgroundEffect,
    Cover
  },
  data() {
    return {
      value: null,
      imgUrl:{
          imgUrlHD:imgUrlHD,
          imgUrlQD:imgUrlQD
        },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      drawer: false,
      kId:'',
      TFBackstageHome:false,
    };
  },
  watch: {
    kId (newVal,oldVal) {
      this.kIdWatch(newVal,oldVal);
    }
  },
  methods:{
    onSetUp(){

    },
    async kIdWatch(newVal,oldVal){
      const res = await kuser.getKid()

      if(newVal == res.data[0].kvalue){
        this.TFBackstageHome = true;
        if(this.TFBackstageHome){
          this.$message({
            message: '已成功打开星门',
            type: 'success'
          });
        }else{
          this.$message.error('星门异常');
        }
        this.drawer = false
        this.kId = ''
      }
      if(newVal == res.data[1].kvalue){
        this.TFBackstageHome = false;
        if(!(this.TFBackstageHome)){
          this.$message({
            message: '已成功关闭星门',
            type: 'success'
          });
        }else{
          this.$message.error('星门异常');
        }
        this.drawer = false
        this.kId = ''
      }
    }
  }
}
</script>

<style>
.home{
  /* background-image: url('/static/img/t2.png');
  background-repeat: no-repeat;
  background-size: cover; */
  /* background-color:rgb(238, 245, 247); */

  font-weight:bold;
  font-family: '微软雅黑';
}
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  #el-header{
    margin: 0px;
    padding: 3px 20px 0px 20px;
    background-repeat: no-repeat;
    background-size: cover;
    text-align:left;
  }
  #el-header-span{
    line-height: 30px;
    font-family:'STKaiti';
  }

  #el-main{
    margin: 0px;
    padding: 0px;
  }

  #el-footer{
    margin: 0px;
    padding: 0px;
    color: #000;
  }

  #input_1{
    width: 180px;
  }

  #footer_el-card{
    height: 60px;
    background-color: #000000;
    border-color: #000000;
  }
  .el-drawer{
    background-image: url('/static/img/bj_4.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
  .el-tabs_el-tab-pane_dev{
    margin-left: 40px;
    margin-right: 40px;
  }
</style>
